<!DOCTYPE html>
<meta charset="UTF-8">
<html>

<head>
    <title>H5微应用开发demo</title>
    <script crossorigin="anonymous"
            integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ=="
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <style type="text/css">
        button {
            width: 200px;
            padding: 8px;
            margin: 8px;
            background-color: #428bca;
            border-color: #357ebd;
            color: #fff;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px; /* future proofing */
            -khtml-border-radius: 10px; /* for old Konqueror browsers */
            text-align: center;
            vertical-align: middle;
            border: 1px solid transparent;
            font-weight: 900;
            font-size: 125%
        }
    </style>
</head>

<body>
<hr>
<h1>H5微应用免登demo</h1>
<p>当前页面的url:</p>
<p id="url"></p>
<br>
<p>解析url,获取的corpID:</p>
<p id="corpId"></p>
<br>
<p>SDK初始化获取的code:</p>
<p id="code"></p>
<br>
<p>请求我们服务端,登录返回的结果:</p>
<p id="result"></p>
<h1 id="hello_name"></h1>
<img src="" alt="" id="hello_avatar">
<hr>
<h4>获取免登录授权完整响应结果：</h4>
<div id="resp_result"></div>
<hr>
<h4>获取用户信息完整响应结果：</h4>
<div id="get_user_resp_result"></div>
<hr>
<a href="http://suremotooport.vaiwan.com/index.html">跳转</a>
<!--<a href="http://suremotooport.vaiwan.com/message/send?type=img" class="send-message" >发送通知-图片</a>-->
<!--<h4><a href="http://suremotooport.vaiwan.com/message/send?type=text" class="send-message" >发送通知-文本</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/message/send?type=link" class="send-message" >发送通知-连接</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/message/send?type=markdown" class="send-message" >发送通知-markdown</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/message/send?type=oa" class="send-message" >发送通知-OA</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/message/send?type=card1" class="send-message" >发送通知-卡片消息 1</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/message/send?type=card2" class="send-message" >发送通知-卡片消息 2</a></h4><br>
<h4><a href="http://suremotooport.vaiwan.com/test/query" id="invoke-user-center" >查询用户中台信息</a></h4><br>-->

<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=text" class="send-message">发送通知-文本
</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=link" class="send-message">发送通知-连接
</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=markdown" class="send-message">
    发送通知-markdown
</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=oa" class="send-message">发送通知-OA</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=card1" class="send-message">发送通知-卡片消息 1
</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/message/send?type=card2" class="send-message">发送通知-卡片消息 2
</button>
<br>
<button type="button" href="http://suremotooport.vaiwan.com/test/query" id="invoke-user-center">查询用户中台信息</button>
<br>

<button type="button" onclick="testDownload()">测试下载文件</button>

<hr>
审批图预览 <br>
<img src=""
     alt="图片正在加载..."/>
<br>
<input type="text" id="btn_getUserAvatarByUserId"/>
<button type="button" onclick="getUserAvatarByUserId()">获取指定用户头像</button>
<img src="" alt="获取指定用户头像" id="getUserAvatarByUserId">

</body>
<script type="text/javascript">
    // http://localhost:8099
    let server_host = "http://suremotooport.vaiwan.com";

    let auth_code;

    let globalUserId;


    $(function () {
        //钉钉sdk 初始化
        // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
        dd.ready(function () {
            //获取当前网页的url
            //http://ding-web.lnexin.cn/?corpid=ding46a9582af5b7541b35c2f4657eb6378f
            var currentUrl = document.location.toString()
            $("#url").append(currentUrl)

            // 解析url中包含的corpId
            // var corpId = '??';
            var corpId = currentUrl.split("corpid=")[1];
            $("#corpId").append(corpId)

            //使用SDK 获取免登授权码
            dd.runtime.permission.requestAuthCode({
                corpId: corpId,
                onSuccess: function (result) {
                    $('#resp_result').text(JSON.stringify(result))
                    var code = result.code;
                    // todo: 临时
                    auth_code = result.code;
                    $("#code").append(code)
                    //请求我们服务端的登陆地址

                    // $.post(server_host + "/login?authCode=" + code + "&corpId=" + corpId, function (response) {
                    $.ajax({
                        url: server_host + "/login",
                        contentType: "application/json",
                        type: 'POST',
                        dataType: 'json',
                        data: {"authCode": code},
                        success: function (response) {
                            console.log(response)
                            $('#get_user_resp_result').text(JSON.stringify(response))
                            globalUserId = response.data.dingtalkUserid;
                            // var send_msg_url = $('.send-message').attr('href');
                            // $('.send-message').attr('href', send_msg_url + "&userId="+response.result.userid)
                            // 初始化连接
                            initSendMsgHref();
                            // 我们服务器返回的信息
                            // 下面代码主要是将返回结果显示出来，可以根据自己的数据结构随便写
                            for (item in response) {
                                $("#result").append("<li>" + item + ":" + response[item] + "</li>")
                            }
                            $('#hello_avatar').attr('src', response.result.avatar);
                            $('#hello_name').html(response.result.name);
                            if (response.user) {
                                for (item in response.user) {
                                    $("#result").append("<li>\t[user 属性] " + item + " : " + response.user[item] + "</li>")
                                }
                            }
                        }
                    })

                }
            });
            //
            // dd.biz.util.share({
            //     type: 1,//分享类型，0:全部组件 默认；1:只能分享到钉钉；2:不能分享，只有刷新按钮
            //     url: 'http://suremotooport.vaiwan.com/demo-index.html',
            //     title: '标题',
            //     content: '嘿嘿',
            //     //image: String,
            //     onSuccess : function() {
            //         alert('分享')
            //         //onSuccess将在调起分享组件成功之后回调
            //         /**/
            //     },
            //     onFail : function(err) {
            //         alert(JSON.stringify(err))
            //     }
            // });

            let device_brand;
            // 获取手机设备信息
            dd.device.base.getPhoneInfo({
                onSuccess: function (data) {
                    /*
                    {
                        screenWidth: 1080, // 手机屏幕宽度
                        screenHeight: 1920, // 手机屏幕高度
                        brand:'Mi', // 手机品牌
                        model:'Note4', // 手机型号
                        version:'7.0', // 版本
                        netInfo:'wifi', // 网络类型 wifi／4g／3g
                        operatorType:'xx' // 运营商信息
                    }
                    */
                    device_brand = data.brand;
                    alert(device_brand);
                    alert("当前设备" + JSON.stringify(data));

                    if (device_brand === 'iPhone') {
                        dd.biz.navigation.setLeft({
                            control: true,//是否控制点击事件，true 控制，false 不控制， 默认false
                            text: '退回到百度',//控制显示文本，空字符串表示显示默认文本
                            onSuccess: function (result) {
                                /*
                                {}
                                */

                                //如果control为true，则onSuccess将在发生按钮点击事件被回调
                                dd.biz.navigation.replace({
                                    url: 'https://www.baidu.com',// 新的页面链接
                                    onSuccess: function (result) {
                                        /*
                                        {}
                                        */
                                    },
                                    onFail: function (err) {
                                    }
                                });
                            },
                            onFail: function (err) {
                            }
                        });
                    } else {
                        document.addEventListener('backbutton', function () {
                            //close();
                            dd.biz.navigation.replace({
                                url: 'https://www.baidu.com',// 新的页面链接
                                onSuccess: function (result) {
                                    /*
                                    {}
                                    */
                                },
                                onFail: function (err) {
                                }
                            });
                        })
                    }

                },
                onFail: function (err) {
                }
            });


        });


    })


    function initSendMsgHref() {
        $('.send-message').each(function () {
            var send_msg_url = $(this).attr('href');
            $(this).attr('href', send_msg_url + "&userId=" + globalUserId)
        });
    }


    $(".send-message").bind("click", function () {
            $.ajax({
                url: $(this).attr('href')
            })
        }
    );

    function getUserAvatarByUserId() {
        var inputUserId = $('#btn_getUserAvatarByUserId').val();
        // var inputUserId = $(this).value();
        $.post(server_host + "/test/getUserAvatarByUserId?userId=" + inputUserId, function (response) {
            $('#getUserAvatarByUserId').attr('src', response.result.avatar);
        });
    }

    function testDownload() {
        var fileURL = 'http://suremotooport.vaiwan.com/file/get?fileUrl=zhongtai/testHelpCenter.docx';
        dd.biz.util.openLink({
            url: fileURL,
            onSuccess: (result) => {
                // 打开成功，会跳转手机本地浏览器进行文件下载
                alert(result)
            },
            onFail: (err) => {
                // 说明不在钉钉环境，或打开失败，失败则提示错误提示
                alert(err)
            }
        }).catch(err => {
            // 说明不在钉钉环境，或打开失败，失败则提示错误
            alert(err)
        })
    }







</script>

</html>